{% extends "base.html" %}

{% block title %}联系我们 - 风之宿{% endblock %}

{% block content %}
<!-- 页面头部 -->
<section class="py-16 bg-primary/10">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl font-serif font-bold text-primary mb-4">联系我们</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        如有任何疑问或需要预订，请随时联系我们。我们的工作人员将竭诚为您提供帮助。
      </p>
    </div>
  </div>
</section>

<!-- 联系信息 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
      <!-- 联系信息 -->
      <div>
        <h2 class="text-3xl font-serif font-bold text-primary mb-6">联系信息</h2>

        <div class="space-y-6">
          <div class="flex items-start">
            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-map-marker text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-primary mb-1">地址</h3>
              <p class="text-gray-600">
                〒123-4567<br>
                ○○县○○市○○町1-2-3
              </p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-phone text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-primary mb-1">电话</h3>
              <p class="text-gray-600">0123-45-6789</p>
              <p class="text-sm text-gray-500">服务时间：8:00 - 20:00</p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-envelope text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-primary mb-1">邮箱</h3>
              <p class="text-gray-600">info@fengzhisu.com</p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-clock-o text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-primary mb-1">前台服务时间</h3>
              <p class="text-gray-600">24小时</p>
            </div>
          </div>
        </div>

        <div class="mt-8">
          <h3 class="text-xl font-semibold text-primary mb-4">社交媒体</h3>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white hover:bg-primary/90 transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white hover:bg-primary/90 transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white hover:bg-primary/90 transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- 联系表单 -->
      <div>
        <h2 class="text-3xl font-serif font-bold text-primary mb-6">发送消息</h2>

        <form method="POST" class="space-y-6">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">姓名 *</label>
            <input type="text" id="name" name="name" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="请输入您的姓名">
          </div>

          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">邮箱 *</label>
            <input type="email" id="email" name="email" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="请输入您的邮箱">
          </div>

          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">电话</label>
            <input type="tel" id="phone" name="phone"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="请输入您的电话号码">
          </div>

          <div>
            <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">主题</label>
            <select id="subject" name="subject"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
              <option value="">请选择咨询主题</option>
              <option value="booking">预订咨询</option>
              <option value="facility">设施咨询</option>
              <option value="cuisine">餐饮咨询</option>
              <option value="other">其他</option>
            </select>
          </div>

          <div>
            <label for="message" class="block text-sm font-medium text-gray-700 mb-2">留言 *</label>
            <textarea id="message" name="message" rows="6" required
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                      placeholder="请详细描述您的咨询内容..."></textarea>
          </div>

          <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-md hover:bg-primary/90 transition-colors font-semibold">
            发送消息
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- 常见问题 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">常见问题</h2>

    <div class="max-w-4xl mx-auto">
      <div class="space-y-6">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <h3 class="text-xl font-semibold text-primary mb-2">如何预订房间？</h3>
          <p class="text-gray-600">
            您可以通过网站直接预订，或通过电话、邮件联系我们进行预订。
            在线预订需要注册账号，电话和邮件预订需提供姓名、联系方式、入住日期等信息。
          </p>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-md">
          <h3 class="text-xl font-semibold text-primary mb-2">最早/最晚入住和退房时间？</h3>
          <p class="text-gray-600">
            入住时间：15:00以后<br>
            退房时间：12:00以前<br>
            如需提前入住或延迟退房，请提前联系我们，我们将根据房态尽力安排。
          </p>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-md">
          <h3 class="text-xl font-semibold text-primary mb-2">是否提供接送服务？</h3>
          <p class="text-gray-600">
            我们为入住客人提供JR○○站的免费接送服务，需提前预约。
            从其他地点如机场的接送为付费服务，具体价格请咨询。
          </p>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-md">
          <h3 class="text-xl font-semibold text-primary mb-2">可以取消或修改预订吗？</h3>
          <p class="text-gray-600">
            在入住前3天取消预订不收取费用，3天内取消将收取部分费用。
            具体取消政策请在预订时确认，或参考我们的预订条款。
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 地图 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">我们的位置</h2>

    <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg h-96">
      <iframe
        src="https://map.baidu.com/@13203488.98245225,3691246.0849829433,14z"
        width="100%"
        height="100%"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  </div>
</section>

<!-- 紧急联系 -->
<section class="py-16 bg-primary text-white">
  <div class="container mx-auto px-4 text-center">
    <h2 class="text-3xl font-serif font-bold mb-4">紧急联系</h2>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      如遇紧急情况，请直接拨打以下电话。
    </p>
    <div class="max-w-2xl mx-auto bg-white/10 rounded-lg p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
        <div>
          <h4 class="font-semibold mb-2">紧急联系电话</h4>
          <p class="text-2xl">0123-45-6789</p>
        </div>
        <div>
          <h4 class="font-semibold mb-2">其他紧急号码</h4>
          <ul class="space-y-1">
            <li>警察：110</li>
            <li>消防/救护：119</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}